<template>
    <div class="history-workorder app-container">

      <!-- 搜索过滤栏 -->
      <div class="menu el-col-14">
        <el-button type="default" v-if="showMe?true:false" @click="allItems">全部</el-button>
        <el-button type="default" v-if="showMe?false:true" @click="meItems">与我相关</el-button>
        <el-date-picker v-show="showDate"
                        v-model="dateValue"
                        type="datetimerange"
                        range-separator="-"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['09:00:00', '18:00:00']"
                        @change="changeDate">
        </el-date-picker>
        <el-button type="default" v-if="showDate?false:true" @click="showDate=!showDate">过滤时间</el-button>
        <el-button type="default" v-if="showDate?true:false" @click="showDate=!showDate">取消</el-button>
      </div>
      <div class="search el-col-10">
        <el-input  class="input-with-select"
                   placeholder="搜索关键字，id、工单标题."
                   v-model="params.search"
                   @keyup.enter.native="fetchData(params)">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>

      <!-- 处理和待处理的工单列表 -->
      <workorder-table :is-loading="isLoading"
                       :data-list="dataList"
                       :history="history"
                       :status="status">
      </workorder-table>

      <div class="pageination" v-show="total>2">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 15, 20]"
          :current-page.sync="params.page"
          :page-size="params.page_size"
          :total="total">
        </el-pagination>
      </div>

    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getWorkOrderList } from '@/api/workorder'
  import WorkorderTable from '../components/table'

  export default {
    name: 'history-workorder',
    computed: {
      ...mapGetters({
        userid: 'userid'
      })
    },
    components: {
      WorkorderTable
    },
    data() {
      return {
        showDate: false,
        showMe: false,
        isLoading: false,
        history: true,
        dataList: [],
        dateValue: '',
        params: {
          page: 1,
          page_size: 10,
          search: '',
          daterange: '',
          user: '',
          status: 2 // status参数值为2返回完成和取消的工单条目
        },
        total: 0,
        status: [
          { value: 3, text: '已放弃', color: 'warning' },
          { value: 2, text: '已完成', color: 'success' }
        ]
      }
    },
    created() {
      this.fetchData(this.params)
    },
    methods: {
      changeDate() {
        if (this.dateValue) {
          this.params.daterange = `${this.dateValue[0]},${this.dateValue[1]}`
          this.fetchData(this.params)
        }
      },
      meItems() {
        this.showMe = true
        this.fetchData({
          page: 1,
          page_size: 10,
          search: '',
          daterange: '',
          status: 2,
          user: this.userid
        })
      },
      allItems() {
        this.showMe = false
        this.fetchData({
          page: 1,
          page_size: 10,
          search: '',
          daterange: '',
          status: 2,
          user: ''
        })
      },
      // 改变页码和页面大小时获取对应的数据
      handleCurrentChange(val) {
        this.params.page = val
        this.fetchData()
      },
      handleSizeChange(val) {
        this.params.page_size = val
        this.fetchData()
      },
      fetchData(params) {
        this.isLoading = true
        getWorkOrderList(params).then(
          res => {
            this.isLoading = true
            this.dataList = res.results
            // console.log(this.dataList)
            this.total = res.count
          }).catch(
          () => {
            this.isLoading = false
            this.$message.error('获取数据失败')
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
.history-workorder {

}
</style>
